<template>
  <div>
    <h1>生命周期演示</h1>
  </div>
</template>

<script>
/**
 * 使用：
 * 1. 从vue导入钩子函数（on+钩子名字）
 * 2. 在setup函数中调用，传入回调
 * 注意⚠️：

1. 只能在当前组件setup中使用这些on开头的钩子函数
2. 用法vue2的钩子函数几乎无异，使用时记得导入
3. 可以和vue2钩子函数并用，**先执行on开头的钩子函数**
 */
import { onMounted, onBeforeMount } from 'vue'
export default {
  setup () {
    console.log('vue3:setup')
    onBeforeMount(() => {
      console.log('vue3:onBeforeMount')
    })
    onMounted(() => {
      // 能干啥？=》1. 操作DOM  2. 发送ajax请求
      console.log('vue3:onMounted')
    })
  },
  // vue2的常用钩子函数
  beforeCreate () {
    console.log('vue2:beforeCreate')
  },
  created () {
    console.log('vue2:created')
  },
  beforeMount () {
    console.log('vue2:beforeMount')
  },
  mounted () {
    console.log('vue2:mounted')
  }
}
</script>

<style lang="scss" scoped>
</style>
